<template>
  <div class="index-container">
    <el-row :gutter="10">
      <el-col :span="5">
        <div class="grid-card" :style="'height:'+treeHeight+'px;margin-top:0px'">
          <RayTree ref="tree" :menu="menu" @nodeClick="nodeClick" @checked="checked"></RayTree>
        </div>
      </el-col>
      <el-col :span="19">
        <RayTable ref="table" :menu="menu" :data_object_no="menu.son_data_object_no" :height="tableHeight"
          :precondition="precondition" :auto_load="false" :other_data="{checkNode:checkNode,selectNode:selectNode}" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import RayTable from '@/views/template/components/rayTable.vue'
  import RayTree from '@/views/template/components/rayTree.vue'

  export default {
    name: 'Tree',
    components: {
      RayTable,
      RayTree
    },
    data() {
      return {
        precondition: {},
        selectNode: {},
        checkNode: {}
      }
    },
    created() {
      this.menu = this.$route.meta.query
      this.tableHeight = document.documentElement.clientHeight - 250
      this.treeHeight = document.documentElement.clientHeight - 250
    },
    methods: {
      departmentClick(row){
        this.selectNode = row
        this.precondition[this.menu.son_id_field] = '%' + row[this.menu.parent_id_field] + '%'
        this.$refs.table.getData()
      },
      checked(checkNode){
        this.checkNode = checkNode
      },
    }
  }
</script>
